<template>
	<view class="container">
		<view class="image-content">
			<image mode="widthFix"
				src="http://qichong-1256206693-1256206693.cos.ap-nanjing.myqcloud.com/upload/20210627/15ea41aa56cef4765edf307eb626f2c8.jpg">
			</image>
		</view>
		<view class="thorui-preview__bd">
			<view class="thorui-preview__item">
				<view class="thorui-preview__label">适用门店</view>
				<view class="thorui-preview__value">全部门店</view>
			</view>
			<view class="thorui-preview__item">
				<view class="thorui-preview__label">有效期限</view>
				<view class="thorui-preview__value" v-if="detail.validType===0">{{detail.validDate}}</view>
				<view class="thorui-preview__value" v-else>{{detail.validDays}}天</view>
			</view>
			<view class="thorui-preview__item">
				<view class="thorui-preview__label">使用须知</view>
				<view class="thorui-preview__value">{{detail.remark}}</view>
			</view>
			<view class="thorui-preview__item">
				<view class="thorui-preview__label">使用次数</view>
				<view class="thorui-preview__value">{{detail.limitUsesCount===0?"不限次数":detail.limitUsesCount}}</view>
			</view>

		</view>
		<!--tabbar-->
		<view class="tui-tabbar">
			<view class="tui-checkAll">
				<view class="tui-total-price"><text class="tui-bold">￥{{detail.amount}}</text> </view>
			</view>
			<view>
				<tui-button width="200rpx" height="70rpx" :size="30" type="warning" shape="circle" @click="paymentClick">确认支付
				</tui-button>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		giftcardDetail
	} from '@/api/activity.js'

	import {
		orderCreateAdvance
	} from "@/api/order.js"

	import {
		mapGetters
	} from 'vuex';
	import WechatApi from '@/libs/wechat.js';
	export default {
		data() {
			return {
				detail: {}
			};
		},
		//发送给朋友
		onShareAppMessage: function() {
			var that = this;
			uni.report('onShareTimeline', '分享好友');
			return {
				title: this.detail.title,
				imageUrl: this.detail.shareImg,
				path: '/subpkg/invite/accept?id='
			};
		},
		//分享到朋友圈
		onShareTimeline: function() {
			uni.report('onShareTimeline', '分享朋友圈');
			return {
				title: this.detail.title,
				imageUrl: this.detail.shareImg,
				path: '/subpkg/invite/accept?id='
			};
		},
		onLoad() {
			giftcardDetail('1409335579144954857').then(res => {
				this.detail = res.data
				uni.setNavigationBarTitle({
					title: this.detail.title
				})
			})
		},
		computed: {
			...mapGetters('m_user', ['curretnStore', 'isLogin', 'userInfo'])
		},
		methods: {
			// 支付
			paymentClick() {
				const that = this
				uni.showLoading({
					title: '加载中'
				});
				WechatApi.getCode()
					.then(code => {
						const queryType = {
							associatedId: this.detail ? this.detail.id : -1,
							storeId: this.curretnStore.id,
							code
						}
						orderCreateAdvance(queryType).then(res => {
							console.log(res)
							WechatApi.getProvider().then(provider => {
								// 调用微信支付
								console.log(provider)
								// 仅作为示例，非真实参数信息。
								uni.requestPayment({
									provider: provider[0],
									timeStamp: res.data.timeStamp,
									nonceStr: res.data.nonceStr,
									package: res.data.package,
									signType: res.data.signType,
									paySign: res.data.paySign,
									success: function(res) {
										uni.hideLoading();
										// uni.navigateTo({
										//   url: '/subpkg/settlementyes/settlementyes?id=' + res.data.orderId
										// })
										that.$util.Tips({
											title: '支付成功！'
										})
										// uni.report('TicketSettlement', '门票结算');
									},
									fail: function(err) {
										uni.hideLoading();
										that.$util.Tips({
											title: '取消支付！'
										})
									}
								});
							})
						}).catch(err => {
							this.$util.Tips({
								title: err
							})
						})
					}).catch(res => {
						this.$util.Tips({
							title: res
						})
					});
			}
		}
	}
</script>

<style lang="scss">
	.image-content {
		width: 100%;
		height: 100%;
		position: relative;
		z-index: -99999;

		image {
			width: 100%;
		}
	}


	/*
  preview
*/
	.thorui-preview__hd {
		position: relative;
		padding: 30rpx;
		text-align: right;
		line-height: 2.5em;

	}

	.thorui-preview__hd:after {
		content: " ";
		position: absolute;
		bottom: 0;
		right: 0;
		height: 1px;
		border-bottom: 1px solid var(--thorui-line-color);
		-webkit-transform-origin: 0 100%;
		transform-origin: 0 100%;
		-webkit-transform: scaleY(.5);
		transform: scaleY(.5);
		left: 30rpx
	}

	.thorui-preview__value {
		display: block;
		overflow: hidden;
		word-break: normal;
		// text-align: left;
		word-wrap: break-word;
		color: var(--thorui-text-color)
	}

	.thorui-preview__hd .thorui-preview__value {
		font-style: normal;
		font-size: 1.6em
	}

	.thorui-preview__bd {
		padding: 30rpx;
		font-size: .9em;
		text-align: right;
		color: var(--thorui-text-color);
		line-height: 2;
		margin-bottom: 106rpx;
	}

	.thorui-preview__ft {
		position: relative;
		height: 100rpx;
		display: flex;
	}

	.thorui-preview__ft:before {
		content: " ";
		position: absolute;
		left: 0;
		top: 0;
		right: 0;
		height: 1px;
		border-top: 1px solid var(--thorui-line-color);
		transform-origin: 0 0;
		transform: scaleY(.5)
	}

	.thorui-preview__item {
		overflow: hidden;
		margin: 10rpx 0;
	}

	.thorui-preview__label {
		float: left;
		margin-right: 1em;
		min-width: 4em;
		color: var(--thorui-text-color-label);
		text-align: justify;
		text-align-last: justify
	}

	.thorui-preview__btn,
	.thorui-preview__btn_default {
		flex: 1;
		color: var(--thorui-color-link);
		text-align: center;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.thorui-preview__btn_default {
		color: var(--thorui-text-color);
		position: relative;
	}

	.thorui-preview__btn_default::after {
		content: " ";
		position: absolute;
		right: 0;
		top: 0;
		width: 1px;
		bottom: 0;
		border-right: 1px solid var(--thorui-line-color);
		transform-origin: 100% 0;
		transform: scaleX(.5)
	}


	.tui-tabbar {
		width: 100%;
		height: 100rpx;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		box-sizing: border-box;
		font-size: 24rpx;
		z-index: 99999;
	}

	.tui-tabbar::before {
		content: '';
		width: 100%;
		border-top: 1rpx solid #d9d9d9;
		position: absolute;
		top: 0;
		left: 0;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
	}

	.tui-checkAll {
		display: flex;
		align-items: center;
	}

	.tui-checkbox-pl {
		padding-left: 12rpx;
	}

	.tui-total-price {
		padding-left: 30rpx;
		font-size: 30rpx !important;
	}
</style>
